<template>
  <div>
    <!-- 头部查询 start -->
    <el-form ref="queryForm" class="query-form" :model="queryParams" inline size="small">
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="全部" @change="handleQuery">
          <el-option :key="0" label="全部" value="" />
          <el-option v-for="it in statusOpts" :key="it.value" :label="it.label" :value="it.value" />
        </el-select>
      </el-form-item>

      <el-form-item class="big-query" label="时间" prop="dateRange" size="small">
        <el-date-picker v-model="queryParams.dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 210px"
          @change="handleQuery">
        </el-date-picker>
      </el-form-item>

      <el-form-item class="big-query" label="关键词" prop="keyword">
        <el-input v-model="queryParams.keyword" placeholder="请输入分群ID、分群名称" clearable style="width: 210px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 头部查询 end -->

    <!-- 头部操作栏 start -->
    <el-button type="primary"
      icon="el-icon-plus"
      style="margin-bottom:10px"
      size="small"
      @click="handleAdd">新增</el-button>
    <!-- 头部操作栏 end -->

    <!-- 数据表格 start -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="分群ID" prop="id" width="80"/>
      <el-table-column label="创建时间" width="160">
        <template slot-scope="scope">
          {{ scope.row.created_at | parseTime}}
        </template>
      </el-table-column>
      <el-table-column label="分群名称" prop="name" show-overflow-tooltip/>
      <el-table-column label="分群条件" prop="rules">
        <template slot-scope="scope">
          <el-tooltip :content="rulescname(scope.row.rules)" placement="top">
            <p class="descStyle">{{ rulescname(scope.row.rules) }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==='stop'? 'danger' : scope.row.status==='publish'?'success':''">
            {{ scope.row.status|translateToName(statusOpts) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        width="180"
        fixed="right"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleUpdata(scope.row)">修改</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleDetail(scope.row)">查看</el-button>
          <el-button
            v-if="scope.row.status==='publish'"
            size="small"
            type="text"
            @click="handleStop(scope.row)">停用</el-button>
          <el-button
            v-if="scope.row.status==='stop'"
            size="small"
            type="text"
            @click="handleStar(scope.row)">启用</el-button>
          <el-button
            v-if="scope.row.status==='stop'"
            size="small"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size" @pagination="getList" />
    <!-- 数据表格 end -->

    <!-- 添加或修改对话框 start -->
    <el-dialog :title="title"
      :visible.sync="open"
      width="1080px"
      :close-on-click-modal="false"
      @close="closeDailog">
      <el-form ref="form"
        :model="form"
        :disabled="detailOpen"
        :rules="rules"
        style="padding-right: 20px;"
        class="input-form-fill"
        label-width="120px">
        <h3 class="title">基本信息</h3>
        <el-form-item label="分群名称" prop="name">
          <el-input v-model.trim="form.name" :maxLength="100"/>
        </el-form-item>
        <el-form-item label="分群备注" prop="desc">
          <el-input
            v-model.trim="form.desc"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            :maxLength="300"
          >
          </el-input>
        </el-form-item>

        <h3 class="title">产品范围</h3>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目" prop="appid">
              <el-select v-model="form.appid" @change="getVerLists(form.appid)">
                <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name" :key="item.app_id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="渠道" prop="channel_id">
              <el-cascader
                :key="cascaderIndex"
                style="width: 100%;"
                v-model="form.channel_id"
                :options="permission_channelList"
                :props="{ multiple: true,emitPath:false }"
                collapse-tags
                :show-all-levels="false"
                filterable
                clearable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="版本">
          <el-col :span="4">
            <el-select v-model="form.version_func" >
              <el-option label="等于" value="Contain" />
              <el-option label="最低" value="Greatere" />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-form-item v-if="form.version_func==='Contain'" prop="versionList">
              <version-select
                size="medium"
                ref="versionSelect"
                :selOptions="versionOpts"
                v-model="form.versionList"
                class="ml10"></version-select>
            </el-form-item>
            <el-form-item v-else prop="version">
              <el-input v-model.trim="form.version" class="ml10"/>
            </el-form-item>
          </el-col>
        </el-form-item>

        <h3 class="title">分群规则</h3>
        <el-form-item label="用户属性满足" prop="rules.rules">
          <el-button type="text" @click="onAddItem" :disabled="form.rules.rules.length >= 10"><i class="el-icon-plus"></i>添加</el-button>
        </el-form-item>
        <el-form-item :class="{'form-item-slotlabel':form.rules.rules.length>1}">
          <el-radio-group v-if="form.rules.rules.length>1" v-model="form.rules.relation" size="mini" slot="label">
            <el-radio-button label="and">且</el-radio-button>
            <el-radio-button label="or">或</el-radio-button>
          </el-radio-group>
          <el-row>
            <el-form-item v-for="(item,index) in form.rules.rules" :key="item.field+item.function+index" style="margin-bottom: 22px;">
              <el-col :span="7.5">
                <el-form-item :prop="'rules.rules.' + index + '.field'"
                  :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <el-select v-model="form.rules.rules[index].field" style="width: 210px;" @change="fieldChange(index, form.rules.rules[index].field)">
                    <el-option v-for="itemField in propertiesList" :value="itemField.name" :label="itemField.cn_name" :key="itemField.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1.5" v-if="['User.VipRemainDay','User.VipExpireDay','User.TrialRemainDay','User.TrialExpireDay'].includes(form.rules.rules[index].field)">
                <el-form-item :prop="'rules.rules.' + index + '.pkg_id'" :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <el-select v-model="form.rules.rules[index].pkg_id" placeholder="请选择" style="width: 210px;" class="ml10">
                    <el-option v-for="item in rightPackageOptions" :key="item.pkg_id" :label="item.name" :value="item.pkg_id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1.5" v-else-if="['User.BuyProduct2Count'].includes(form.rules.rules[index].field)">
                <el-form-item :prop="'rules.rules.' + index + '.product_id'" :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <el-select v-model="form.rules.rules[index].product_id" placeholder="请选择" style="width: 210px;" class="ml10" filterable>
                    <el-option v-for="item in productData2" :key="item.id" :label="item.id+'  '+item.show_name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1.5" v-else-if="['User.BuyProduct6Count'].includes(form.rules.rules[index].field)">
                <el-form-item :prop="'rules.rules.' + index + '.product_id'" :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <el-select v-model="form.rules.rules[index].product_id" placeholder="请选择" style="width: 210px;" class="ml10" filterable>
                    <el-option v-for="item in productData6" :key="item.id" :label="item.id+'  '+item.show_name" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4.5">
                <el-form-item :prop="'rules.rules.' + index + '.function'"
                  :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <el-select v-model="form.rules.rules[index].function" @change="functionChange(index, form.rules.rules[index].function)" style="width: 120px;" class="ml10">
                    <el-option v-for="itemFunc in form.rules.rules[index].fn_list" :value="itemFunc.name" :label="itemFunc.cn_name" :key="itemFunc.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <template v-if="['User.LastBuyProduct2'].includes(form.rules.rules[index].field)">
                <el-col :span="8">
                  <el-form-item :prop="'rules.rules.' + index + '.params'"
                    :rules="{ required: true, message: '请选择', trigger: 'change' }">
                    <el-select v-model="form.rules.rules[index].params"
                      placeholder="请选择"
                      style="width: 234px;"
                      class="ml10"
                      multiple
                      :multiple-limit="form.rules.rules[index].function==='Equal'?1:0"
                      collapse-tags
                      filterable>
                      <el-option v-for="item in productData2" :key="item.id" :label="item.id+'  '+item.show_name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </template>

              <template v-else-if="['User.LastBuyProduct6'].includes(form.rules.rules[index].field)">
                <el-col :span="8">
                  <el-form-item :prop="'rules.rules.' + index + '.params'"
                    :rules="{ required: true, message: '请选择', trigger: 'change' }">
                    <el-select v-model="form.rules.rules[index].params"
                      placeholder="请选择"
                      style="width: 234px;"
                      class="ml10"
                      multiple
                      collapse-tags
                      filterable>
                      <el-option v-for="item in productData6" :key="item.id" :label="item.show_name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </template>

              <template v-else-if="['select'].includes(form.rules.rules[index]._web_val_type)">
                <el-col :span="3.5">
                  <el-form-item :prop="'rules.rules.' + index + '.params.0'"
                    :rules="{ required: true, message: '请选择', trigger: 'blur' }">
                    <el-select v-model="form.rules.rules[index].params[0]" :style="{ width: form.rules.rules[index].function==='Between'?'100px':'234px' }" class="ml10">
                      <el-option v-for="item in form.rules.rules[index]._web_val_list" :value="item.v" :label="item.k" :key="item.v"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </template>

              <template v-else-if="['number'].includes(form.rules.rules[index].type)">

                <el-col :span="3.5">
                  <el-form-item :prop="'rules.rules.' + index + '.params.0'"
                    :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                    <el-input type="number" v-model.trim="form.rules.rules[index].params[0]" class="ml10" :style="{ width: form.rules.rules[index].function==='Between'?'100px':'234px' }"></el-input>
                  </el-form-item>
                </el-col>

                <template v-if="form.rules.rules[index].function==='Between'">
                  <el-col :span="0.5"><span class="ml10">与</span></el-col>
                  <el-col :span="3.5">
                    <el-form-item :prop="'rules.rules.' + index + '.params.1'"
                      :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                      <el-input type="number" v-model.trim="form.rules.rules[index].params[1]" class="ml10" style="width: 100px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <span class="ml10">之间</span>
                </template>
                <!-- <span v-else-if="form.rules.rules[index].params[form.rules.rules[index].params.length-1] === 'day'" class="ml10">天</span> -->
              </template>
              <el-button type="text" icon="el-icon-remove-outline" class="ml10 fr" @click="onDeleteItem(index)"></el-button>
              <el-button type="text" icon="el-icon-circle-plus-outline" class="fr" @click="onAddItem" v-if="index===form.rules.rules.length-1 && form.rules.rules.length < 10"></el-button>
            </el-form-item>
          </el-row>
        </el-form-item>

      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 认</el-button>
        <el-button @click="closeDailog">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改对话框 end -->

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getVersionTree } from '@/api'
import { productList } from '@/api/member/product'
import { listRightPackage } from '@/api/rights/package'
import { getChannelByAppId } from '@/api/system/channel'
import { listUserGroup, listProperties, listPropertieType, addUserGroup, updateUserGroup, updateStatusUserGroup } from '@/api/user-clustering'
export default {
  name: 'ActivityMg',
  components: {},
  data () {
    return {
      propertiesList: [],
      propertiesType: [],
      permission_channelList: [],
      versionOpts: [],
      statusOpts: [
        { value: 'publish', label: '正常' },
        { value: 'stop', label: '已停用' }
      ],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: null,
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        status: '',
        dateRange: null,
        keyword: undefined
      },
      detailOpen: false,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      cascaderIndex: 1,
      // 权益包
      rightPackageOptions: [],
      // 表单参数
      form: {
        status: 'publish',
        name: '',
        desc: '',
        appid: '',
        channel_id: [],
        version_func: 'Contain', // 版本函数,Greatere-大于等于,Contain-包含
        version: '',
        versionList: [],
        rules: {
          relation: 'or',
          rules: []
        }
      },
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            validator: (rule, value, cb) => {
              if (!value) {
                cb(new Error('分群名称不能为空'))
              } else if (/[^\u4e00-\u9fff\w-'"‘’“”]/g.test(value)) {
                cb(new Error('支持输入中文、英文、数字、下划线、中划线、引号、双引号,不支持特殊字符'))
              } else {
                cb()
              }
            }
          }
        ],
        desc: [
          {
            required: false,
            trigger: 'blur',
            validator: (rule, value, cb) => {
              if (value && /[^\u4e00-\u9fff\w-'"‘’“”]/g.test(value)) {
                cb(new Error('支持输入中文、英文、数字、下划线、中划线、引号、双引号,不支持特殊字符'))
              } else {
                cb()
              }
            }
          }
        ],
        version: [
          { required: false, pattern: /^\d+(\.\d+){1,4}$/, message: '请输入正确的版本号，如：X.X.X.X.X，最少2位，最多5位', trigger: 'blur' }
        ],
        versionList: [
          { max: 5, type: 'array', message: '最多可选5个版本', trigger: 'change' }
        ],
        'rules.rules': [
          { required: true, type: 'array', message: '用户属性不能为空', trigger: 'change' }
        ]
      },

      productData2: [],
      productData6: []
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  created () {
    this.getChannels()
    this._listProperties()
    this._listPropertieType()
    this._listRightPackage()
    this.emptyForm = this.deepClone(this.form)
    this.getList()
  },
  methods: {
    _listProperties () {
      listProperties({
        category: ''
      }).then(res => {
        this.propertiesList = res.data.list
      })
    },
    _listPropertieType () {
      listPropertieType({
        category: ''
      }).then(res => {
        this.propertiesType = res.data
      })
    },
    _listRightPackage (appid) {
      listRightPackage({ page: 1, page_size: 100, status: 1, appid }).then(res => {
        this.rightPackageOptions = res.data.list || []
      })
    },
    getChannels () {
      const list = this.permission_projectList.map(item => item.app_id)
      getChannelByAppId({ app_ids: list.join(',') }).then(res => {
        const channelList = res.data.list
        for (const item of this.permission_projectList) {
          item.label = item.name
          item.value = parseInt(item.app_id)
          const list = channelList.filter(item1 => item1.app_id === item.value)
          item.children = list.map(item => ({ label: `${item.name}(${item.channel_id})`, value: item.channel_id }))
        }
        this.channelList = channelList
      })
    },
    /** 查询列表 */
    getList () {
      this.loading = true
      const params = Object.assign({}, this.queryParams)
      if (params.dateRange) {
        params.begin_at = params.dateRange[0]
        params.end_at = params.dateRange[1]
      }
      delete params.dateRange
      listUserGroup(params).then(response => {
        this.list = response.data.list
        this.total = response.data.count || 0
      }
      ).finally(() => {
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    /** 关闭弹窗&表单重置 */
    closeDailog () {
      this.$refs['form'].clearValidate()
      this.form = this.deepClone(this.emptyForm)
      this.open = false
      this._listRightPackage()
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.open = true
      this.detailOpen = false
      this.title = '新增用户分群'
      this.form.id = undefined
      this.permission_channelList = []
      this.cascaderIndex += 1
    },
    /** 修改按钮操作 */
    handleUpdata (rowOld) {
      let row = this.deepClone(rowOld)
      let self = this
      this.detailOpen = false
      if (row.appid) {
        this.getVerLists(row.appid)
        this.permission_channelList = this.deepClone(this.permission_projectList.filter(v => v.app_id === row.appid))
      } else {
        this.versionOpts = []
        row.appid = ''
        this.permission_channelList = this.deepClone(this.permission_projectList)
      }
      this.cascaderIndex += 1
      if (row.version_func === 'Contain') {
        row.versionList = row.version ? row.version.split(',') : []
        row.version = ''
      }
      this.open = true
      this.title = '修改用户分群'
      let rules = JSON.parse(row.rules)
      rules.rules.map(item => {
        // let fns = self.propertiesType.list.filter(v => item.type === v.type)
        // if (fns && fns.length) {
        //   item.fn_list = self.propertiesType.fn_list.filter(t => fns[0].support_function.includes(t.name))
        // }
        let row = self.propertiesList.find(({ name }) => name === item.field)
        Object.assign(item, self.getRulesOpsData(row))
      })
      this.form = {
        ...row,
        rules
      }
      if (rules.rules.some(({ field }) => ['User.LastBuyProduct2', 'User.BuyProduct2Count'].includes(field))) {
        this.getProductOps('2')
      }
      if (rules.rules.some(({ field }) => ['User.LastBuyProduct6', 'User.BuyProduct6Count'].includes(field))) {
        this.getProductOps('6')
      }
    },
    /** 查看按钮操作 */
    handleDetail (row) {
      this.handleUpdata(row)
      this.detailOpen = true
      this.title = '查看用户分群'
    },
    /** 添加用户属性 */
    onAddItem () {
      if (this.form.rules.rules.length < 10) {
        this.form.rules.rules.push({
          'type': '',
          'field': '',
          'function': '',
          'params': [],
          'product_id': null,
          'pkg_id': null
        })
      }
      this.$refs['form'].validateField('rules.rules')
    },
    /** 删除用户属性 */
    onDeleteItem (index) {
      this.form.rules.rules.splice(index, 1)
      this.$refs['form'].validateField('rules.rules')
    },
    /** 提交按钮 */
    // eslint-disable-next-line sonarjs/cognitive-complexity
    submitForm () {
      if (this.detailOpen) {
        this.open = false
        return
      }
      this.$refs['form'].validate(valid => {
        if (!valid) return
        const params = this.deepClone(this.form)
        if (params.channel_id?.length === this.channelList?.length) {
          params.channel_id = []
        }
        if (params.versionList?.length) {
          params.version = params.versionList.join(',')
        }
        if (!params.appid) {
          delete params.appid
        }
        delete params.versionList
        if (params.rules?.rules?.length) {
          params.rules.rules.map(item => {
            delete item.fn_list
            for (let k in item) {
              if (/^_web/.test(k)) {
                delete item[k]
              }
            }
            if (!item.params[1]) {
              // item.params.splice(1, 1)
            }
          })
        }
        params.rules = JSON.stringify(params.rules)
        if (params.id) {
          updateUserGroup(params).then(() => {
            this.msgSuccess('修改成功')
            this.closeDailog()
            this.getList()
          })
        } else {
          addUserGroup(params).then(() => {
            this.msgSuccess('新增成功')
            this.closeDailog()
            this.getList()
          })
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete ({ id }) {
      const { pageIndex, pageSize } = this.queryParams
      this.$confirm('是否确认删除该分群?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatusUserGroup({ id, status: 'deleted' }).then(() => {
          this.queryParams.pageIndex = this.getCurrentPage({ total: this.total, pageSize, pageIndex })
          this.getList()
          this.msgSuccess('删除成功')
        })
      })
    },
    /** 结束按钮操作 */
    handleStop ({ id }) {
      this.$confirm('是否确认停用该分群?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatusUserGroup({ id, status: 'stop' }).then(() => {
          this.getList()
          this.msgSuccess('停用成功')
        })
      })
    },
    /** 启用按钮操作 */
    handleStar ({ id }) {
      updateStatusUserGroup({ id, status: 'publish' }).then(() => {
        this.getList()
        this.msgSuccess('启用成功')
      })
    },

    getProductOps (type) {
      const param = {
        status: 10,
        page: 1,
        page_size: 1000,
        keyword: '',
        attr_types: [type]
      }
      if (this.form.appid && type === '2') {
        param.bind_app_id = this.form.appid
      }
      productList(param).then(res => {
        this['productData' + type] = res.data.list || []
      })
    },
    getVerLists (app_id) {
      getVersionTree({ app_id, is_test: false })
        .then(res => {
          this.versionOpts = res.data || []
        })
      this._listRightPackage(app_id)
      this.getProductOps('2')
      this.getProductOps('6')
      this.form.channel_id = []
      this.permission_channelList = this.deepClone(this.permission_projectList.filter(v => v.app_id === app_id))
      this.cascaderIndex += 1
    },
    fieldChange (index, field) {
      let self = this
      let param = self.propertiesList.filter(item => item.name === field)
      const row = param[0]
      if (param && param.length) {
        self.form.rules.rules[index].type = param[0].data_type
        self.form.rules.rules[index].cname = param[0].cn_name
        if (param[0].param?.default_cell && param[0].data_type === 'number') {
          self.form.rules.rules[index].params = ['', 'day']
        } else if (row.param && typeof row.param.default_value !== 'undefined') {
          self.form.rules.rules[index].params = [row.param.default_value]
        } else {
          self.form.rules.rules[index].params = []
        }
      }

      Object.assign(self.form.rules.rules[index], self.getRulesOpsData(row))
      // let fns = self.propertiesType.list.filter(item => self.form.rules.rules[index].type === item.type)
      // if (fns && fns.length) {
      //   self.form.rules.rules[index].fn_list = self.propertiesType.fn_list.filter(item => fns[0].support_function.includes(item.name))
      // }
      self.form.rules.rules[index].function = ''
      if (['User.LastBuyProduct2', 'User.BuyProduct2Count'].includes(this.form.rules.rules[index].field)) {
        this.getProductOps('2')
      }
      if (['User.LastBuyProduct6', 'User.BuyProduct6Count'].includes(this.form.rules.rules[index].field)) {
        this.getProductOps('6')
      }
      if (!['User.VipRemainDay', 'User.VipExpireDay', 'User.TrialRemainDay', 'User.TrialExpireDay'].includes(self.form.rules.rules[index].field)) {
        self.form.rules.rules[index].pkg_id = null
      }
      self.form.rules.rules[index].product_id = null
    },
    functionChange (index, fun) {
      if (['select'].includes(this.form.rules.rules[index]._web_val_type)) {
        if (fun === 'Equal') {
          this.form.rules.rules[index].params.splice(1)
        }
      } else if (['number'].includes(this.form.rules.rules[index].type) && fun === 'Between') {
        this.form.rules.rules[index].params.splice(1, 0, '')
      } else if (['number'].includes(this.form.rules.rules[index].type) && this.form.rules.rules[index].params.length > 1 && !isNaN(this.form.rules.rules[index].params[1])) {
        this.form.rules.rules[index].params.splice(1, 1)
      }
    },
    rulescname (str) {
      let obj = JSON.parse(str)
      let cnames = []
      if (obj.rules) {
        cnames = cnames.concat(this.rulesMap(obj.rules))
      }
      return cnames.join(';')
    },
    rulesMap (list) {
      let cnamesM = []
      let self = this
      list.map(item => {
        if (item.rules) {
          cnamesM = cnamesM.concat(self.rulesMap(item.rules))
        } else {
          cnamesM.push(item.cname)
        }
      })
      return cnamesM
    },
    // 获取配置项可选数据
    getRulesOpsData (row) {
      const self = this
      const ops = {}
      // 限制方式可选值，优先使用 limit_func
      if (row && row.param && row.param.limit_func && row.param.limit_func.length) {
        ops.fn_list = self.propertiesType.fn_list.filter(item => row.param.limit_func.includes(item.name))
      } else {
        let fns = self.propertiesType.list.filter(item => row.data_type === item.type)
        if (fns && fns.length) {
          ops.fn_list = self.propertiesType.fn_list.filter(item => fns[0].support_function.includes(item.name))
        }
      }
      // 限制条件可选值
      if (row && row.param && row.param.type === 'select') {
        ops._web_val_type = 'select'
        ops._web_val_list = row.param.values || []
      } else {
        ops._web_val_type = 'text'
        ops._web_val_list = null
      }
      return ops
    }
  }
}
</script>
<style lang="scss" scoped>
.ql-editor {
  padding: 0;
  overflow-y: unset;
}
h3.title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
}
.line {
  text-align: right;
  padding-right: 12px;
}
.descStyle {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2; //行数
  -webkit-box-orient: vertical;
}
.form-item-slotlabel {
  position: relative;
  /deep/ .el-form-item__label {
    display: flex;
    justify-content: end;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -11px;
    position: absolute;
  }
  &::before {
    content: '';
    position: absolute;
    width: 44px;
    height: calc(50% - 50px);
    top: 18px;
    left: 64px;
    border-top: 1px solid #DCDFE6;
    border-left: 1px solid #DCDFE6;
  }
  &::after {
    content: '';
    position: absolute;
    width: 44px;
    height: calc(50% - 50px);
    bottom: 40px;
    left: 64px;
    border-left: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
  }
}
/deep/ input::-webkit-inner-spin-button {
  display: none;
}
</style>
